<template>
  <div class="TableCommonClass">
    <table class="TableClass">
      <!-- 表头 -->
      <thead class="TheadClass">
      <tr>
        <th :class="{'border':border}" class="ThClass" v-for="(item,TheadIndex) in ColumnList"
            :style="item?.HeaderStyle" :key="TheadIndex">{{ item.title }}
        </th>
      </tr>
      </thead>
      <!-- 表格主体 -->
      <tbody class="TbodyClass">
      <tr class="TbodyTrClass" v-for="(row,RowIndex) in ColumnTable" :style="row?.RowTableStyle"  :key="RowIndex">
        <td class="TbodyTdClass" :class="{'border':border}" v-for="(col,ColIndex) in ColumnList"
            :style="col?.ColTableStyle" :key="RowIndex+ColIndex">
          {{ getDataByName(row, col.content) }}
        </td>
      </tr>
      <!-- 可以添加更多行 -->
      </tbody>

      <!-- 表尾（可选） -->
      <tfoot>
      <!--      <tr>-->
      <!--        <td>这是表尾</td>-->
      <!--        <td>这是表尾</td>-->
      <!--        <td>这是表尾</td>-->
      <!--      </tr>-->
      </tfoot>
    </table>

  </div>
</template>

<script setup name="TableComponents">
const props = defineProps({
  border: {
    type: Boolean,
    default: false
  },
  ColumnList: {
    type: Array,
    default: [
      {
        title: "张三222",
        content: "name",
        // HeaderStyle: 'width:20px',
        ColTableStyle: "background:yellow;width:200px"
      }, {
        title: "李四",
        content: "age",
        // HeaderStyle: 'background:blue'
      }
    ]
  },
  ColumnTable: {
    type: Array,
    default: [
      {
        name: "张三1张三1张三1张三1张三1张三1张三1张三1",
        age: "李四1",
        // RowTableStyle: "background:blue"
      }, {
        name: "张三2",
        age: "李四2",
      },
    ]
  },
  // 如果有其他 props，也可以在这里一起定义
  // ...
});
// 例如，检查 border prop 的值
if (props.border) {
  console.log(props.border, '666')
  // 如果有边框，执行某些操作
} else {
  console.log('hhhhhh')
}

function getDataByName(rowData, fieldName) {
  // 假设 rowData 是一个对象，并且包含 fieldName 对应的属性
  return rowData[fieldName];
}
</script>
<style lang="scss" scoped>
.TableCommonClass {
  width: 500px;
  padding: 1%;
  border-radius: 3px;
  box-shadow: -1px 1px 1px #f8f8f8;
  border: 1px solid #20B2AA;
}
//鼠标放上背景色
.TbodyTrClass:hover{
  .TbodyTdClass {
    background-color: #f5f7fa !important;
  }
}



//表格样式
.TableClass {
  width: 100%;
  border: none;
  border-collapse: collapse;
}

//标题边框
.TheadClass {
  border: 2px solid #f8f8f8;

  .ThClass {
    color: #b1b3b7;
    padding: 10px;
  }
}

.TbodyClass {
  text-align: center;
  padding: 5px;
}

.border {
  border: 2px solid #f8f8f8;
  border-radius: 2px;

}
</style>
